<template>
  <div class="content">
    <div class="content-box">
      <vue-particles
        class="login-bg"
        color="#f4f4f4"
        :particleOpacity="0.5"
        :particlesNumber="120"
        shapeType="circle"
        :particleSize="4"
        linesColor="#f4f4f4"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      />
      <div class="content-login">
        <div class="content-login-info">
          <div class="sign-box">
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="86px"
            >
              <h3 class="title">毕业论文管理系统注册</h3>
              <el-form-item label="账号" prop="account">
                <el-input
                  v-model="form.account"
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-user-solid"
                  autofocus="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="form.password"
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  :show-password="tag"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="cfpassword">
                <el-input
                  v-model="form.cfpassword"
                  type="password"
                  placeholder="请确认密码"
                  prefix-icon="el-icon-lock"
                  :show-password="tag"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" class="w100p" @click="regist"
                  >注册</el-button
                >
                <div class="txt-r">
                  <router-link to="/login" style="position: absolute; right: 0"
                    >已有账号，去登陆</router-link
                  >
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { computed, reactive } from "vue";
import router from "@/router";
import { Message } from "element-ui";
import { register } from "@/api/api/loginApi.js";

const formRef = ref();
const form = reactive({
  account: "",
  password: "",
  cfpassword: "",
});
const tag = ref(true);
const rules = computed(() => {
  return {
    account: [
      {
        required: true,
        message: "请输入用户名",
        trigger: ["change", "blur"],
      },
      {
        pattern: /^[a-zA-Z][a-zA-Z0-9 _]{4,31}$/,
        message: "由英文字母开头的长度5-32位字母和_组成",
        trigger: ["change", "blur"],
      },
    ],
    password: {
      required: true,
      min: 6,
      message: "请输入至少6个字符的密码",
      trigger: ["change", "blur"],
    },
    cfpassword: [
      {
        required: true,
        message: "请确认密码",
        trigger: ["change", "blur"],
      },
      {
        validator: (rule, value, callback) => {
          if (value !== form.password) {
            callback(new Error("两次密码输入不一致"));
          } else {
            callback();
          }
        },
        trigger: ["change", "blur"],
      },
    ],
  };
});
// 这个loading应该是提示的
const loading = ref(false);
function regist() {
  formRef.value.validate((valid) => {
    if (!valid) {
      Message.error("请输入正确的用户信息，请重新输入！");
      Object.keys(form).forEach((key) => {
        form[key] = "";
      });
      return;
    } else {
      loading.value = true;
      // 注册相关的
      register(form)
        .then((res) => {
          if (res.code == 200) {
            Message({
              message: "账号注册成功！",
              type: "success",
              showClose: true,
            });
            router.push("/login");
          }
        })
        .catch((err) => {
          console.log(err.message);
        })
        .finally(() => {});
    }
  });
}
</script>

<style lang="less" scoped>
.content {
  height: 100vh;
  width: 99vw;
  background-image: url("../../assets/img/BackImg.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sign-box {
  width: 400px;
  background: #fff;
  padding: 30px 50px 20px 30px;
  border-radius: 4px;
  box-shadow: 0 0 10px #022c44;
  .title {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    margin-bottom: 12px;
    color: #000;
    margin-left: 45px;
  }
  .w100p {
    width: 100%;
    margin-top: 0px;
    font-size: 16.8px;
  }
  .txt-r {
    font-size: 15px;
    width: 317px;
    position: relative;
  }
}
/deep/.el-input__inner {
  &::placeholder {
    color: grey;
    font-size: 14px;
  }
}
</style>@/api/api/loginApi.js